<template>
    <div class="page has-navbar" v-nav="{ title: '商品列表', showBackButton: true, onBackButtonClick: back,showMenuButton: true,onMenuButtonClick: menu }">
      <div class="page-content">
        <div class="nav" >
          <cells :items="entrances" :on-cell-click="onCellClick" row="1" col="4">
            <div class="entrance assertive" style=""><i class="icon ion-android-arrow-dropup"><i class="icon ion-android-arrow-dropdown"></i></i><br><span>默认</span></div>
          </cells>
        </div>
        <list>
          <item class="item" v-for="(flower , index) in flowers" :key="index">
            <img :src="flower.imgSrc" :alt="flower.title" @click="showFlower" :f-id="flower.id">
            <div @click="showFlower" :f-id="flower.id" >
              <h1 class="title" >{{flower.title}}</h1>
              <div class="price">
                <span class="hb miniFont">￥</span><span class="priceNumber">{{flower.priceInt}}</span><span class="miniFont">{{flower.priceFloat}}</span>
              </div>
              <div class="xxqk">
                <span><img src="../image/_ionicons_svg_ios-cube.svg">库存 {{flower.kc}}</span>
                <span><img src="../image/_ionicons_svg_md-trending-up.svg" alt="">销量 {{flower.xl}}</span>
              </div>
            </div>
            <div class="guCar">
              <i class="icon ion-android-cart"></i>
            </div>
          </item>
        </list>
      </div>
    </div>
</template>

<script>
  let entrancesStyle = 'display: flex;justify-content: center;color: #000000;';
  let iconBoxStyle = 'position: relative;right: -5px;font-size: 16px';
  let iconDownStyle = 'position: absolute;top: 16px;';
  let iconUpStyle = 'position: absolute;top: 8px';
    export default {
        name: "FlowerList",
        data(){
          return{
            entrances: [
              `<div class="entrance assertive" style="${entrancesStyle}">
                <span style="line-height: 45px;color: #ff3300">默认</span>
                <div style="${iconBoxStyle}">
                </div>
              </div>`,
              `<div class="entrance assertive" style="${entrancesStyle}">
                <span style="line-height: 45px">销量</span>
                <div style="${iconBoxStyle}">
                 <i class="icon ion-android-arrow-dropup" style="${iconUpStyle}"></i>
                 <i class="icon ion-android-arrow-dropdown" style="${iconDownStyle}"></i>
                </div>
              </div>`,
              `<div class="entrance assertive" style="${entrancesStyle}">
                <span style="line-height: 45px">新品</span>
                <div style="${iconBoxStyle}">
                 <i class="icon ion-android-arrow-dropup" style="${iconUpStyle}"></i>
                 <i class="icon ion-android-arrow-dropdown" style="${iconDownStyle}"></i>
                </div>
              </div>`,
              `<div class="entrance assertive" style="${entrancesStyle}">
                <span style="line-height: 45px">价格</span>
                <div style="${iconBoxStyle}">
                 <i class="icon ion-android-arrow-dropup" style="${iconUpStyle}"></i>
                 <i class="icon ion-android-arrow-dropdown" style="${iconDownStyle}"></i>
                </div>
              </div>`,
            ],
            flowers : [
              {
                id : '1',
                title : '满天星鲜花束 1束',
                priceInt : 45,
                priceFloat : '.50',
                kc : 1525,
                xl : 1452,
                imgSrc : 'https://s2.ax1x.com/2019/05/20/EvJU78.png'
              },
              {
                id : '2',
                title : '满天星鲜花束 1束',
                priceInt : 45,
                priceFloat : '.50',
                kc : 1525,
                xl : 1452,
                imgSrc : 'https://s2.ax1x.com/2019/05/20/EvJU78.png'
              },
              {
                id : '3',
                title : '满天星鲜花束 1束',
                priceInt : 45,
                priceFloat : '.50',
                kc : 1525,
                xl : 1452,
                imgSrc : 'https://s2.ax1x.com/2019/05/20/EvJU78.png'
              },

            ]
          }
        },
        methods: {
          back() {
            this.$router.go(-1)
          },
          menu(){
            alert(1);
          },
          onCellClick(){

          },
          showFlower(ev){
            $router.forward('/details')
          }
        }
    }
</script>

<style scoped lang="less">
  *{
    margin: 0;
    padding: 0;
  }
  .entrance{

    .ion-android-arrow-dropup::before{
      position: absolute;
      right: 0;
    }
  }
  .cells{
    margin: 0;
  }
  .entrance:hover{
    color: red!important;
  }
  .list {
    @priceColor : #ff3300;
    img{
      width: 70px;
      height: 70px;
      margin-right: 15px;
    }
    .item {
      padding: 15px;
      display: flex;
      position: relative;
      //标题
      .title {
        font-size: 18px;
      }
      //价格
      .price{
        color: @priceColor;
        line-height: 32px;
        .priceNumber{
          font-size: 18px;
        }
        .miniFont{
          font-size: 12px;
        }
      }
      //详细情况
      .xxqk{
        display: flex;
        justify-content: space-between;
        color: #999999;
        font-size: 12px;
        img{
          margin: 0;
          width: 12px;
          height: 12px;
        }
      }
      //购物车
      .guCar{
        @guCarSize : 30px;
        width: @guCarSize;
        height: @guCarSize;
        font-size: @guCarSize;
        position: absolute;
        right: 15px;
        bottom: 15px;
        color: #ef2b67;
      }
    }
  }
</style>
